<template>
  <div style="background-color: #FFFFFF;height: 667px;">
    <div class="logo">
      <img src="../../img/logo.png" >
    </div>
    <div class="login">
      <van-tabs v-model="active">
        <van-tab title="手机登录">
          <form>
            <div class="phoneNumber">
              <input type="number" placeholder="手机号" v-model="phone"/>
              <div @click="getCode" v-if="!send" :class="{code:isphone}">获取验证码</div>
              <div @click="getCode" v-else>已发送({{time}})</div>
            </div>
            <div>
              <input type="number" placeholder="验证码" v-model="code"/>
            </div>
            <p>温馨提示：测试账号请输入手机号码，获取验证码，验证码均为666666</p>
            <div class="loginBtn" @click.prevent="login">登录</div>
            <div class="backBtn" @click="back">返回</div>
          </form>

        </van-tab>
        <van-tab title="密码登录">内容 2</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import {sendCode,login} from '../../api'
  import { Toast } from 'vant';
  export default{
    name:'Login',
    data() {
      return {
        active: 2,
        send:false,
        isphone:false,
        phone:'',
        code:'',
        time: 60,
      }
    },
    watch:{
      phone(val) {
        let reg = /^1[3456789]\d{9}$/
        if(reg.test(val)){
          this.isphone = true
        }
      }
    },
    methods:{
      // 登录
      async login() {

        try{
          let reg = /^1[3456789]\d{9}$/
          if(!reg.test(this.phone)){
            Toast('请输入正确的手机号')
            return false;
          }
          if(!this.code){
            Toast('请输入验证码')
          }
          const {data} = await login({phone:this.phone,code:this.code})
          if(data.success_code == 200){
            // window.localStorage.setItem('userinfo',JSON.stringify(data.data))
            this.$store.commit('setUserInfo',data.data)
            this.$router.push(this.$route.query.src_url?this.$route.query.src_url:'/home/user')
          }
        }catch(e){
          Toast('网络异常，请稍后重试')
        }
      },
      // 返回
      back() {
        this.$router.go(-1)
      },
      // 获取验证码
      async getCode() {
        try{
          this.send = true
          const {data} = await sendCode(this.phone)
          if(data.success_code == 200){
            Toast('验证码发送成功')
          }
          // 倒计时
          const timer = setInterval(() => {
            if(this.time <= 0){
              this.send = false
              clearInterval(timer)
              return false
            }
            this.time--
          },1000)
        }catch(e){
          Toast('网络异常，请稍后重试')
        }
      }
    }
  }
</script>

<style scoped>

  /* 图片 */
  .logo{
    width: 750px;
    padding-top: 120px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
   /* width: 750px; */
  }
  .logo img{
    width: 484px;
  }
  .phoneNumber{
    margin: 50px 0 40px;

  }
  .phoneNumber .code{
    color: #75A342;
  }
  input{
    width: 598px;
    line-height: 80px;
    border-radius: 10px;
    font-size: 28px;

  }
  .phoneNumber{
    position: relative;
  }
  .phoneNumber div{
    font-size: 28px;
    color: #ccc;
    position: absolute;
    top: 22px;
    right: 4px;

  }
  .login{
    width: 600px;
    margin: 0 auto;
  }
  .login p{
    width: 600px;
    font-size: 12px;
    color: #999;
    margin: 20px 0 50px;
  }
  .loginBtn,.backBtn{
    width: 600px;
    line-height: 80px;
    border-radius: 10px;
    font-size: 40px;
    text-align: center;
    color: #FFFFFF;
    background-color: #75a342;
    margin-bottom: 30px;
  }
</style>
